<template>
    <div>
      <h3>示例</h3>
        <el-tree
        :data="data"
        show-checkbox
        node-key="id"
        default-expand-all
        :expand-on-click-node="false">
        <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span>
            <el-button
                type="text"
                size="mini"
                @click="() => append(data)">
                Append
            </el-button>
            <el-button
                type="text"
                size="mini"
                @click="() => remove(node, data)">
                Delete
            </el-button>
            </span>
        </span>
        </el-tree>
        <div class="markdown-body">
          <treeTableNodeMD></treeTableNodeMD>
        </div>
    </div>
</template>

<script>
import treeTableNodeMD from "../md/treeTableNodeMD.md"
let id = 1000;

  export default {
    components:{treeTableNodeMD},
    data() {
      const data = [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }];
      return {
        data: JSON.parse(JSON.stringify(data)),
        data: JSON.parse(JSON.stringify(data))
      }
    },

    methods: {
        append(data) {
            const newChild = { id: id++, label: 'testtest', children: [] };
            if (!data.children) {
            this.$set(data, 'children', []);
            }
            data.children.push(newChild);
        },

        remove(node, data) {
            const parent = node.parent;
            console.log(parent)
            const children = parent.data.children || parent.data;
            const index = children.findIndex(d => d.id === data.id);
            children.splice(index, 1);
        },
        // renderContent(h, { node, data, store }) {
        //     return (
        //     <span class="custom-tree-node">
        //         <span>{node.label}</span>
        //         <span>
        //         <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>
        //         <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
        //         </span>
        //     </span>);
        // }
    }
  }
// export default {
//     methods: {
//         // getCheckedNodes() {
//         //     console.log(this.$refs.tree.getCheckedNodes());
//         // },
//         // getCheckedNodes() {
//         //     console.log(this.$refs.tree.getCheckedNodes());
//         // },
//         // getCheckedKeys() {
//         //     console.log(this.$refs.tree.getCheckedKeys());
//         // },
//         // setCheckedNodes() {
//         //     this.$refs.tree.setCheckedNodes([{
//         //             id: 5,
//         //             label: '二级 2-1'
//         //         }, {
//         //             id: 9,
//         //             label: '三级 1-1-1'
//         //     }]);
//         // },
//         // setCheckedKeys() {
//         //     this.$refs.tree.setCheckedKeys([3]);
//         // },
//         // resetChecked() {
//         //     this.$refs.tree.setCheckedKeys([]);
//         // }
//     },
//     data() {
//       return {
//         data: [{
//           id: 1,
//           label: '一级 1',
//           children: [{
//             id: 4,
//             label: '二级 1-1',
//             children: [{
//               id: 9,
//               label: '三级 1-1-1'
//             }, {
//               id: 10,
//               label: '三级 1-1-2'
//             }]
//           }]
//         }, {
//           id: 2,
//           label: '一级 2',
//           children: [{
//             id: 5,
//             label: '二级 2-1'
//           }, {
//             id: 6,
//             label: '二级 2-2'
//           }]
//         }, {
//           id: 3,
//           label: '一级 3',
//           children: [{
//             id: 7,
//             label: '二级 3-1'
//           }, {
//             id: 8,
//             label: '二级 3-2'
//           }]
//         }],
//         defaultProps: {
//           children: 'children',
//           label: 'label'
//         }
//       };
//     }
//   };
</script>
<style>

</style>